<template>
  <el-aside width="auto">
    <el-menu
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      :unique-opened="true"
      :collapse="isCollapse"
      v-if="userInfo.adminname === 'admin'"
    >
      <el-menu-item class="T">
        <div class="title">
          <img src="../../public/wz.png" alt="" />
          <span v-show="!isCollapse">千峰后台管理系统</span>
        </div>
      </el-menu-item>

      <el-menu-item index="/home">首页</el-menu-item>

      <el-sub-menu index="1">
        <template #title>
          <el-icon><Setting /></el-icon><span>账户管理</span>
        </template>
        <el-menu-item index="/home/manage/manageList"
          ><span>管理员列表</span></el-menu-item
        >
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
          <el-icon><PictureFilled /></el-icon>
          <span>轮播图管理</span>
        </template>
        <el-menu-item index="/home/swipemanage/swipelist">
          <span>轮播图列表</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Goods /></el-icon>
          <span>商品管理</span>
        </template>
        <el-menu-item index="/home/product/ProductList">
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/home/product/SecondProduct">
          <span>商品秒杀</span>
        </el-menu-item>
        <el-menu-item index="/home/product/RecommendList">
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/home/product/ScreeningList">
          <span>筛选列表</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <el-menu
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      :unique-opened="true"
      :collapse="isCollapse"
      v-else
    >
      <el-menu-item class="T">
        <div class="title">
          <img src="../../public/wz.png" alt="" />
          <span v-show="!isCollapse">千峰后台管理系统</span>
        </div>
      </el-menu-item>
      <el-menu-item index="/home">首页</el-menu-item>
      <el-sub-menu
        v-for="(item, index) in userInfo.checkedkeys"
        :index="`${index + 1}`"
      >
        <template #title>
          <el-icon><Setting /></el-icon><span>{{ item.label }}</span>
        </template>
        <el-menu-item
          v-for="todo in item.children"
          :index="`/home/${item.path}/${todo.path}`"
          ><span>{{ todo.label }}</span></el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style scoped>
.title {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title > img {
  width: 32px;
  margin-right: 5px;
  border-radius: 50%;
}
h4 {
  font-size: 16px;
  color: #fff;
}
.T {
  cursor: auto;
}
.T:hover {
  background: none;
}
</style>
